import { Table, Divider, Tag, Input, message, Modal, Switch} from 'antd';
import styles from './productList.css';
import {useState,useEffect} from 'react';
import Link from 'umi/link';
import {Button} from 'antd'
import {connect} from 'dva';
const { Search } = Input;

function productList(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	let value4 ="";
	let value5 ="";
	let value6 ="";
	let value7 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}
	const [coss,setCoss] = useState(0)
	useEffect(() => { 
		const fetchData = async () =>props.dispatch({
			type: 'info/getProductData',
			payload: {
				page:1,
				name:'',
				per:10
			}
	}); 
		fetchData(); 
	}, [coss])
	const columns = [
		{
		  title: '商品图片',
		  dataIndex: 'image',
		  render: text => <img src={text} style={{width:100,height:100}}/>,
		},
	    {
	      title: '商品名称',
	      dataIndex: 'name',
	      render: text => <p>{text}</p>,
	    },
	    {
	     title: '商品价格',
	     dataIndex: 'price',
	     render: text => <p>{text}</p>,
	   },
	   {
	    title: '库存',
	    dataIndex: 'quantity',
	    render: text => <p>{text}</p>,
	  },
	  {
	    title: '操作',
	    render: (text, record) => (
	      <span>
	        <a onClick={()=>props.dispatch({
				type:'info/getProductDetail',
				payload:{
					id:record.key
				}
				}).then(()=>{
					setVisible(true)
				})}>修改</a>
	        <Divider type="vertical" />
	        <a onClick={()=>props.dispatch({
	        	type:'info/postDeleteProduct',
	        	payload:{
	        		id:record.key
	        	}
	        	}).then(()=>{
	        		message.success('删除成功~');
					setCoss(() => {
					    return (coss+1);
					  })
	        	})
	        }>删除</a>
	      </span>
	    ),
	  },
	];
	const data=[]
	for(let i=1;i<props.page+1;i++){
		props.productlist.map(item=>
		data.push({
			index:i,
			key: item._id,
			name: item.name,
			image:item.coverImg,
			quantity: item.quantity,
			price:item.price,
			desc:item.descriptions
		}))
	}
	console.log(props.current,props.totalCount)
	console.log(data)
	const total={
      columns:columns,
      dataSource: data,
      pagination: {
        pageSize:10,
        current: props.current,
        total:props.totalCount,
        onChange: (page) => props.dispatch({
			type: 'info/getProductData',
			payload: {
				page,
				name:'',
				per:10
			}
		})
      }
    }
	const search=value=>{
		if(value!=''){
			props.history.push({pathname:'/home/searchProduct',query:{id:value}})
			console.log(value)
		}
	}
	  
	const onChange=(checked)=>{
		console.log(checked)
	}
	  
  return (
    <div className={styles.normal}>
      <h1 style={{position:'relative'}}>商品列表<Link to="/home/addProduct"><Button type='primary' style={{position:'absolute',right:0,top:10,lineHeight:1}}>新增商品</Button></Link></h1>
	  <Search placeholder="请输入商品名称" onSearch={value =>search(value)} enterButton />
	  <Table {...total}/>
	  <Modal
	      title="修改"
	      visible={visible}
	      onOk={()=>props.dispatch({
	  		type:'info/editProduct',
	  		payload:{
				id:props.id,
	  			name:value1.state.value,
	  			descriptions:value2.state.value,
	  			quantity:value3.state.value,
				price:value4.state.value,
				coverImg:value5.state.value,
				productCategory:value6.state.value,
				onSale:value7.rcSwitch.state.checked
	  		}
	  	}).then(()=>{
	  		setVisible(false)
			if(props.id){
				message.success('修改成功~')
				setCoss(() => {
					return (coss+1);
				})
				setTimeout(function() {
					props.history.go(0)
				},0);
			}
	  	})}
	      onCancel={handleCancel}
	  	okText="确认"
	  	cancelText="取消"
	  >
	      商品名称:<Input defaultValue={props.productName} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
	      商品描述:<Input defaultValue={props.productDesc} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
	      商品数量:<Input defaultValue={props.productQuantity} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
		  商品价格:<Input defaultValue={props.productPrice} type="text" style={{height:40,margin:10}} ref={(val) =>value4 = val} />
		  商品图片:<Input defaultValue={props.productIamge} type="text" style={{height:40,margin:10}} ref={(val) =>value5 = val} />
		  商品ID:<Input defaultValue={props.productCategory} type="text" style={{height:40,margin:10}} ref={(val) =>value6 = val} />
		  是否上架:<Switch defaultChecked={props.productOnSale} ref={(val) =>value7 = val} onChange={onChange} checkedChildren="上架" unCheckedChildren="下架" style={{margin:10}}/>
	  </Modal>
    </div>
  );
}
export default connect(state=>state.info)(productList)